import { PLATE_COLOR_MAP } from '../../abnormal-order';
import styles from '../style.less';

const FixedView = (props: { currData: AbnormalOrderTableItem }) => {
  const { currData } = props;
  const correctDetail: AboCorrectParams = JSON.parse(currData.correctParams || '{}');
  return (
    <div style={{ textAlign: 'center', marginTop: 20 }}>
      <table cellSpacing={0} cellPadding={0} className={styles.mytable}>
        <tbody style={{ tableLayout: 'fixed' }} className={styles.mytable}>
          <td rowSpan={5} colSpan={1} style={{ backgroundColor: '#F5F5F5', width: '20%' }}>
            审核前
          </td>
          <tr>
            <td className={styles.tdTitle}>泊位车牌</td>
            <td>{currData.spotPlateNumber || '无'}</td>
          </tr>
          <tr>
            <td className={styles.tdTitle}>巡检车牌</td>
            <td>{currData.plateNumber || '无'}</td>
          </tr>
          <tr>
            <td className={styles.tdTitle}>车牌颜色</td>
            <td>{PLATE_COLOR_MAP.get(currData.plateColor) || '未知'}</td>
          </tr>
          <tr>
            <td className={styles.tdTitle}>泊位编号</td>
            <td>{currData.spotId}</td>
          </tr>
        </tbody>
      </table>

      {correctDetail && (
        <table style={{ marginTop: 10 }} cellSpacing={0} cellPadding={0} className={styles.mytable}>
          <tbody>
            <td rowSpan={6} colSpan={1} style={{ backgroundColor: '#F5F5F5', width: '20%' }}>
              审核后
            </td>
            <tr>
              <td className={styles.tdTitle}>车牌号码</td>
              <td>{correctDetail.plateNumber || '无'}</td>
            </tr>
            <tr>
              <td className={styles.tdTitle}>车牌颜色</td>
              <td>{PLATE_COLOR_MAP.get(correctDetail.plateColor) || '未知'}</td>
            </tr>
            <tr>
              <td className={styles.tdTitle}>泊位编号</td>
              <td>{correctDetail.spotId}</td>
            </tr>
            <tr>
              <td className={styles.tdTitle}>冲突驶出</td>
              <td>{correctDetail.outOrder || '无'}</td>
            </tr>
            <tr>
              <td className={styles.tdTitle}>车辆更换</td>
              <td>{correctDetail.changeCar ? '是' : '否'}</td>
            </tr>
          </tbody>
        </table>
      )}
    </div>
  );
};

export default FixedView;
